<!DOCTYPE html>
<html>

    <head>
        <title>文件加速页面</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- Bootstrap -->
        <link href="View/FAST/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="View/FAST/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="View/FAST/assets/styles.css" rel="stylesheet" media="screen">
        <link href="View/FAST/assets/DT_bootstrap.css" rel="stylesheet" media="screen">
        <link href="View/FAST/vendors/jGrowl/jquery.jgrowl.css" rel="stylesheet" media="screen">
        <link href="public/css/font-awesome.min.css" rel="stylesheet" media="screen">
        <!--[if lte IE 8]>
        <script language="javascript" type="text/javascript" src="View/FAST/vendors/flot/excanvas.min.js"></script>
        <![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>

        <![endif]-->
        <script src="View/FAST/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <style>
        td{
            word-wrap:break-word;
            text-align: center;
        }
        table{
            table-layout:fixed ;
        }
        #addChainMode {
            height:700px;
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width:800px;
        }
        #addChainMode .modal-body {
            height:700px;
            max-height: 700px;
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width:700px;
            /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
           /*margin:-250px -450px;*/
        }

    </style>

    <body>
    {include h}
        <div class="container-fluid">

            <div class="row-fluid">
                {include l}
                <!--/span-->
                <div class="span10" id="content">
<!--加速网络拓扑-->
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header" >
                                <div class="muted pull-left">文件加速桥</div>
                                <div class="pull-right hidden" title="刷新拓扑图" style="cursor:pointer">
                                   <span id="topoRefreash" class="badge badge-success " onclick="topoRefreash();">
                                            <li class="icon-refresh"></li>
                                   </span>
                                </div>
                                <div class="pull-right hidden" title="添加链接" style="margin-right: 3px;cursor:pointer">
                                   <span id="addLink" class="badge badge-warning " onclick="addChain();">
                                            <li class="icon-plus"></li>
                                   </span>
                                </div>
                            </div>
                            <div class="block-content collapse in hidden">
                                <div class="span12">
                                    <div id="topoDiv" style="height: 700px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
                <!--/加速网络拓扑-->


                </div>
            </div>
            <hr>
            {include f}
        </div>
    <!-- 添加任务链路 mode  -->
    <div id="addChainMode" class="modal hide"  >
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">&times;</button>
            <h3>添加链路</h3>
        </div>
        <div class="modal-body" style="padding-top: 0px">
            <div class="row-fluid section" >
                <div class="block-content collapse in">
                    <div class="span12">

                            <form class="form-horizontal" id="addTaskForm">
                                <fieldset>
                                    <div class="control-group">
                                        <label class="control-label" >链路名称</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  id="linkName" name="linkName" type="text" value="">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" >收发模式</label>
                                        <div class="controls">
                                            <select  name="direction" id="direction" class="chzn-select">
                                                <option value="recive" >接收数据</option>
                                                <option value="send" >发送数据</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group" style="display: none" >
                                        <label class="control-label" >速度控制</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="speed" id="speed" type="text" value="0">
                                            <span class="help-inline">单位是KBps,0是不限制，最大10000</span>
                                        </div>
                                    </div>
                                    <h4>本地加速器</h4>
                                    <div class="control-group">
                                        <label class="control-label" >客户端IP</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="clientIp" id="clientIp" type="text" value="">
                                            <span class="help-inline">客户端使用哪个IP发送或接收</span>
                                        </div>
                                    </div>
                                    <div class="control-group" id="clientPortDiv">
                                        <label class="control-label">客户端接收端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="clientPort" id="clientPort" type="text" value="6001">
                                            <span class="help-inline">客户端使用哪个端口接收数据</span>
                                        </div>
                                    </div>
                                    <div class="control-group " id="localSpeederIpToCDiv">
                                        <label class="control-label" >绑定加速器ip</label>
                                        <div class="controls">
                                            <select  name="localSpeederIpToC"  style="pointer-events: none;" class="chzn-select" id="localSpeederIpToC">
                                            </select>
                                            <span class="help-inline">绑定加速器哪个ip用于和客户端收发数据</span>
                                        </div>
                                    </div>
                                    <div class="control-group hidden" id="localSpeederInPortToCDiv">
                                        <label class="control-label">加速器接收数据端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="localSpeederInPortToC" id="localSpeederInPortToC" type="text" value="6001">
                                            <span class="help-inline">与发送客户端加速器IP地址的端口设置一致</span>
                                        </div>
                                    </div>
                                   <h4>远端加速器</h4>
                                    <div class="control-group">
                                        <label class="control-label" >远端加速器IP</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="remoteSpeederIp" id="remoteSpeederIp" type="text" value="">
                                            <span class="help-inline">远端加速器IP</span>
                                        </div>
                                    </div>
                                    <div class="control-group hidden" id="remoteSpeederPortDev">
                                        <label class="control-label">远端加速器接收数据端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="remoteSpeederPort" id="remoteSpeederPort" type="text" value="6001">
                                            <span class="help-inline">远端加速器接收数据端口</span>
                                        </div>
                                    </div>
                                    <div class="control-group" id="localSpeederIpToSDiv">
                                        <label class="control-label" >绑定加速器ip</label>
                                        <div class="controls">
                                            <select  name="localSpeederIpToS" style="pointer-events: none;" class="chzn-select" id="localSpeederIpToS">
                                            </select>
                                            <span class="help-inline">绑定加速器哪个ip用于和远端加速节点收发数据</span>
                                        </div>
                                    </div>
                                    <div class="control-group" id="localSpeederInPortToSDiv" >
                                        <label class="control-label">本地节点端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="localSpeederInPortToS" id="localSpeederInPortToS" type="text" value="6001">
                                            <span class="help-inline">需要系统从哪个端口接收数据</span>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <button type="submit" id="addTaskSubmit" data-taskid="" class="btn btn-primary">提交</button>
                                        <button data-dismiss="modal" class="btn" >取消</button>
                                    </div>
                                </fieldset>
                            </form>

                    </div>
                </div>

            </div>
            <form class="form-horizontal form" style="display: none" >
                <fieldset>
                    <div class="control-group" style="display: none">
                        <label class="control-label" >节点接收ip</label>
                        <div class="controls">
                            <select  name="localSpeederIp"  class="chzn-select" id="localSpeederIp">

                            </select>
                        </div>
                    </div>
                    <div class="control-group" >
                        <label class="control-label">节点接收端口</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  name="localSpeederInPort" id="localSpeederInPort" type="text" value="">
                            <span class="help-inline">需要系统从哪个端口接收数据</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" >收方IP</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  name="remoteIp" id="remoteIp" type="text" value="">
                            <span class="help-inline">需要系统将数据发给哪个IP</span>
                        </div>
                    </div>
                    <div class="control-group" >
                        <label class="control-label">收方端口</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  name="remotePort" id="remotePort" type="text" value="">
                            <span class="help-inline">需要系统将数据发给哪个端口</span>
                        </div>
                    </div>




                    <div class="form-actions">
                        <button type="submit" data-taskid="" class="btn btn-primary">提交</button>
                        <button data-dismiss="modal" class="btn" >取消</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <!-- /添加任务链路 mode  -->
    <!-- 任务控制 mode  -->
    <div id="taskControlMode" class="modal hide"  >
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">&times;</button>
            <h3>任务控制【<span id="taskControlTitle"></span>】</h3>
        </div>
        <div class="modal-body" >
           <p>
            <button class="btn btn-success btn-large" onclick="controlTask('start')">启动</button>
            <button class="btn btn-danger btn-large" onclick="controlTask('stop')">停止</button>
            <button class="btn btn-warning btn-large" onclick="delTask()">删除</button>
            <button class="btn btn-info btn-large" onclick="" style="display: none">编辑</button>
               </p>
            <br>
            <h4>全链路质量检测</h4>
            <br>
            <p>
                <button class="btn btn-inverse btn-mini" onclick="taskDelay('addDelay')">模拟50ms延时</button>
                <button class="btn btn-inverse btn-mini" onclick="taskDelay('delDelay')">关闭模拟延时</button>
                <button class="btn btn-inverse btn-mini" onclick="pingTask()">网络联通性测试</button>
                <button class="btn btn-inverse btn-mini" onclick="FASTpingTask()">加速协议联通性测试</button>
            </p>
            <p id="pingInfo">

            </p>
        </div>
    </div>
    <!-- /任务控制 mode  -->
    <!--alert 确认-->
    <div id="delAlert" class="modal hide">
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">&times;</button>
            <h3>删除【<span id="delAlertTitle"></span>】</h3>
        </div>
        <div class="modal-body">
            <p>任务删除后无法恢复，请谨慎操作！</p>
        </div>
        <div class="modal-footer">
            <a data-dismiss="modal" class="btn btn-danger" href="#" onclick="controlTask('del')">确认删除</a>
            <a data-dismiss="modal" class="btn" href="#">取消</a>
        </div>
    </div>
    <!--alert确认对话框-->
        <!--/.fluid-container-->
        <link href="View/FAST/vendors/datepicker.css" rel="stylesheet" media="screen">
        <link href="View/FAST/vendors/uniform.default.css" rel="stylesheet" media="screen">
        <link href="View/FAST/vendors/chosen.min.css" rel="stylesheet" media="screen">
        <link href="View/FAST/vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="View/FAST/vendors/morris/morris.css">

        <script src="View/FAST/vendors/jquery-1.9.1.js"></script>
        <script src="View/FAST/bootstrap/js/bootstrap.min.js"></script>
        <script src="View/FAST/vendors/datatables/js/jquery.dataTables.min.js"></script>

        <script src="View/FAST/vendors/jquery.uniform.min.js"></script>
        <script src="View/FAST/vendors/chosen.jquery.min.js"></script>
        <script src="View/FAST/vendors/bootstrap-datepicker.js"></script>

        <script src="View/FAST/assets/DT_bootstrap.js"></script>
        <script src="View/FAST/vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
        <script src="View/FAST/vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

        <script src="View/FAST/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
		<script src="View/FAST/vendors/jGrowl/jquery.jgrowl.js"></script>

        <script src="View/FAST/assets/scripts.js"></script>

        <script src="View/FAST/vendors/raphael-min.js"></script>
        <script src="View/FAST/vendors/morris/morris.min.js"></script>
        <script src="View/FAST/assets/echarts.min.js?v="></script>
        <script>
            //取消所有form自动提交功能
            $('form').submit(function() {return false;});
            //全局变量
            var currentLid;//当前选中的linkid
            var currentNid;//当前选中的nid
            var currentTkid;//当前选中的tkid
            var currentService="file";
            var myChart = echarts.init(document.getElementById('topoDiv'));

            var dataMap = new Map();

            var option = {
//                title: {
//                    text: '网络拓扑图'
//                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}',
                },
                backgroundColor: "#F5F5F5",
                xAxis: {
                    min: 0,
                    max: 120,
                    show: false,
                    type: 'value'
                },
                yAxis: {
                    min: 0,
                    max: 120,
                    show: false,
                    type: 'value'
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        id: 'a',
                        coordinateSystem: 'cartesian2d',
                        edgeSymbol: ['', 'arrow'],
                        // symbolSize: 50,
                        label: {
                            normal: {
                                show: true,
                                position: 'bottom',
                                color: '#12b5d0',
                                formatter:function(item) {
                                    //console.log(item);
                                    return item.data.nameLable
                                }
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 2,
                                shadowColor: 'none',
                                curveness:0.1
                            }
                        },
                        xAxis: {
                            min: 0,
                            max: 120,
                            show: false,
                            type: 'value'
                        },
                        yAxis: {
                            min: 0,
                            max: 120,
                            show: false,
                            type: 'value'
                        },
                        // edgeSymbolSize: 8,
                        draggable: true,
                        data: [],
                        links: [],
                        z: 4,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: function(item) {
                                        //return item.data.name
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: 'A',
                        type: 'lines',
                        coordinateSystem: 'cartesian2d',
                        z: 4,
                        effect: {
                            show: true,
                            trailLength: 0,
                            symbol: 'arrow',
                            color: '#12b5d0',
                            symbolSize: 8, // 宽度高度
                            period: 3
                        },
                        lineStyle: {
                            normal: {
                                curveness: 0.1
                            }
                        },
                        data: [],
                    }]
            };


                //图形点击事件
            myChart.on('click', function(param) {
                //console.log(param);
                if(param.componentType=="series"){//点击链接线
                    $('#taskControlTitle').html(param.data.label.formatter);
                    $('#delAlertTitle').html(param.data.label.formatter);
                    currentTkid = param.data.tkid;//tkid更新赋值
                    currentLid = param.data.lid;
                    $('#pingInfo').empty();
                    $('#taskControlMode').modal('show');
                }else if(param.componentType=="graphic"){//点击的是节点
                    //因为节点被graphic盖住了
                }
            });
            //窗口自适应大小
            window.addEventListener('resize', function() {
                myChart.resize();

            });
            function getTopoData(){
                $.ajax({
                    async: false,
                    url: "?topo/getTopoData?op=file",
                    type: 'GET',
                    data : {},
                    dataType: 'json',
                    timeout: 30000,
                    success: function(e){
                        //nodes = [];links=[];
                        var nodes = e.data.nodes;
                        var links = e.data.links;
                        option.series[1].data = [];
                        option.series[0].links = [];
                        option.series[0].data = [];
                        //两个for循环  组装数组
                        for (var j = 0; j < nodes.length; j++) {
                            var x = parseInt(nodes[j].x);
                            var y = parseInt(nodes[j].y);
                            var node = {
                                name: nodes[j].nid,
                                nid:nodes[j].nid,
                                nameLable:nodes[j].name,
                                type:nodes[j].type,
                                value: [x, y],
                                symbolSize: 50,
                                // alarm: nodes[j].alarm,
                                symbol: 'image:///View/FAST/images/' + nodes[j].img,
                                itemStyle: {
                                    normal: {
                                        color: '#12b5d0',
                                    }
                                },
                                tooltip:{
                                    formatter: function(item) {
                                        //console.log(links[i]);
                                        return item.data.nameLable;

                                    }
                                }
                            };
                            dataMap.set(nodes[j].nid, [x, y]);
                            option.series[0].data.push(node)
                            //console.log(dataMap);
                        }
                        for (var i = 0; i < links.length; i++) {
                            var link = {
                                source: links[i].source,
                                target: links[i].target,
                                tip:links[i].tip=='0.0.0.0'?"0":links[i].tip,
                                sip:links[i].sip=='0.0.0.0'?"0":links[i].sip,
                                lid:links[i].lid,
                                tkid:links[i].tkid,
                                tport:links[i].tport,
                                speed:links[i].speed,
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: "任务名称:"+links[i].name
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        type:links[i].status==1?"solid":"dashed",
                                        color: '#2057d0'
                                    }
                                },
                                tooltip:{
                                    formatter: function(item) {
                                        //console.log(links[i]);
                                        return item.data.sip+"->"+item.data.tip+":"+item.data.tport;

                                    }
                                }
                            }

                            option.series[0].links.push(link)
                            // 组装动态移动的效果数据
                            //通过get 获取 源和目的的xy坐标
                            var lines = [{
                                coord: dataMap.get(links[i].source)
                            },{
                                coord: dataMap.get(links[i].target)
                            }];
                            console.log(lines);
                            option.series[1].data.push(lines)
                        }
                    },
                });

            }
            function topoRefreash(){
                getTopoData();
                //console.log(charts);

                //设置optiong用于显示
                //console.log('刷新topo 输出');
                console.log(option);
                myChart.setOption(option);
                //设置鼠标拖拽效果

                myChart.setOption({
                    graphic: echarts.util.map(option.series[0].data, function(item, dataIndex) {
                        return {
                            type: 'circle',//用 setOption 首次设定图形元素时必须指定。 可取值：
                            position: myChart.convertToPixel('grid', item.value),
                            shape: {
                                cx: 5,
                                cy: 5,
                                r: 20
                            },
                            invisible: true,//隐藏拖拽区域
                            draggable: true,
                            ondrag: echarts.util.curry(onPointDragging, dataIndex),
                            //onmousemove: echarts.util.curry(showTooltip, dataIndex),
                            //onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                            ondragend:echarts.util.curry(onPointDragEnd, dataIndex),
                            z: 100
                        };
                    })
                });

            }
            //获取拖拽结束后的位置 提交到数据库
            function onPointDragEnd(dataIndex, dx, dy) {
                console.log([option.series[0].data[dataIndex].nid,option.series[0].data[dataIndex].value]);
                $.ajax({
                    async: true,
                    url: "?topo/editNodePosition",
                    type: 'POST',
                    data: {
                        nid:option.series[0].data[dataIndex].nid,
                        x:option.series[0].data[dataIndex].value[0],
                        y:option.series[0].data[dataIndex].value[1]
                    },
                    dataType: 'json',
                })
            }
            function onPointDragging(dataIndex, dx, dy) {
                //console.log("tempV-----");
                var tempV = myChart.convertFromPixel('grid', this.position);
                //console.log("tempV", tempV);
                option.series[0].data[dataIndex].value = [tempV[0], tempV[1]];
                // Update data
                myChart.setOption({
                    series: [{
                        id: 'a',
                        data: option.series[0].data
                    }]
                });
            }

            function showTooltip(dataIndex) {
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: dataIndex
                });
            }

            function hideTooltip(dataIndex) {
                myChart.dispatchAction({
                    type: 'hideTip'
                });
            }
            //添加一条新的收发链路
            function addChain(){

                $.get("?task2/getIps?",{},  function(e){
                    if(e.state){
                        var ips = e.data;
                        $('#localSpeederIpToC').empty();
                        $('#localSpeederIpToS').empty();//到加速节点
                        for(i in ips){
                            if(ips[i]['ip'] == ""||ips[i]['ip'] == "127.0.0.1"){
                                continue;
                            }
                            $('#localSpeederIpToC').append('<option value="'+ips[i]['ip']+'">'+ips[i]['ethname']+':'+ips[i]['ip']+'</option>');
                            $('#localSpeederIpToS').append('<option value="'+ips[i]['ip']+'">'+ips[i]['ethname']+':'+ips[i]['ip']+'</option>');
                        }
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');

                $('#addChainMode').modal('show');
            }
            //删除任务 确认环节
            function delTask(){
                $('#taskControlMode').modal('hide');
                $("#delAlert").modal('show');
            }

            //提交控制任务操作
            function controlTask(op){
                console.log([op,currentTkid]);
                $.post("{php HYBBS_URL('task2','controlTask');}", {
                    op:op,
                    tkid:currentTkid,
                    service:currentService
                },  function(e){
                    if(e.state){
                        window.location.reload();
                        //topoRefreash();
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');

            }
            function taskDelay(op){
                console.log([op,currentTkid]);
                $.post("{php HYBBS_URL('task2','taskDelay');}", {
                    op:op,
                    tkid:currentTkid,
                    service:currentService
                },  function(e){
                    if(e.state){
                        $.jGrowl(e.info);
                        //topoRefreash();
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            }
            //pingtask
            function pingTask(){
                $.post("{php HYBBS_URL('task2','taskPing');}", {
                    tkid:currentTkid,
                },  function(e){
                    if(e.state){
                        //console.log(12);
                        $("#pingInfo").empty();
                        e.info.forEach(function (item){
                            $("#pingInfo").append(item);
                            $("#pingInfo").append("<br>");
                        });
                        //topoRefreash();
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            }

             //FASTpingtask
             function FASTpingTask(){
                $.post("{php HYBBS_URL('task2','FASTtaskPing');}", {
                    tkid:currentTkid,
                },  function(e){
                    if(e.state){
                        //console.log(12);
                        $("#pingInfo").empty();
                        e.info.forEach(function (item){
                            $("#pingInfo").append(item);
                            $("#pingInfo").append("<br>");
                        });
                        //topoRefreash();
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            }
            $(function() {
                $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
                    var $total = navigation.find('li').length;
                    var $current = index+1;
                    var $percent = ($current/$total) * 100;
                    $('#rootwizard').find('.bar').css({width:$percent+'%'});
                    // If it's the last tab then hide the last button and show the finish instead
                    if($current >= $total) {
                        $('#rootwizard').find('.pager .next').hide();
                        $('#rootwizard').find('.pager .finish').show();
                        $('#rootwizard').find('.pager .finish').removeClass('disabled');
                    } else {
                        $('#rootwizard').find('.pager .next').show();
                        $('#rootwizard').find('.pager .finish').hide();
                    }
                }});
//                $('#rootwizard .finish').click(function() {
//                    alert('Finished!, Starting over!');
//                    $('#rootwizard').find("a[href*='tab1']").trigger('click');
//                });
                topoRefreash();
                //添加任务
                $("#addTaskSubmit").click(function(){
                    var postdata =[];
                    $("#addTaskForm").serializeArray().forEach(function(item){
                        postdata.push(item);
                    });

                    postdata.push(
                            {
                                name:"service",
                                value: "file",
                            },{
                                name:"op",
                                value:"addTask"
                            }
                    );
                    console.log(postdata);
                    $.post("{php HYBBS_URL('task2','addTask');}", postdata,  function(e){
                        if(e.state){
                            window.location.reload();
                            //topoRefreash();
                        }else{
                            $.jGrowl(e.info);
                        }

                    },'json');

                });
                //切换收发方向时设置显示输入内容
                $("#direction").change(function(){
                    var direction=($(this).val());
                    if(direction=="recive"){
                        //接收方向
                        $('#clientPortDiv').removeClass("hidden");
                        $('#localSpeederInPortToSDiv').removeClass("hidden");
                        $('#localSpeederInPortToCDiv').addClass("hidden");
                        $('#remoteSpeederPortDev').addClass("hidden");
                        $('#localSpeederIpToSDiv').addClass("hidden");
                    }else if(direction=="send"){
                        //发送方向
                        $('#clientPortDiv').addClass("hidden");
                        $('#localSpeederInPortToSDiv').addClass("hidden");
                        $('#localSpeederInPortToCDiv').removeClass("hidden");
                        $('#remoteSpeederPortDev').removeClass("hidden");
                        $('#localSpeederIpToSDiv').removeClass("hidden");

                    }
                });
            });
        </script>
    </body>

</html>